/**
 * 多人串行审批人排序&选人
 */
import "./approveStepReadonly.css"
import React, { useState } from "react";
import clsx from "clsx";
import { Checkbox } from "antd";
import {v4 as uuid} from 'uuid'
import { ReactSortable } from "react-sortablejs";
import JstempApproveStepsAuditor from "./JstempApproveStepsAuditor";

/**
 * approveSteps 步骤信息
 * model readonly只读 edit编辑模式
 * actual_steps 实际的步骤路径，不包含需要确认的路径
 */
 export default function ({
    nodes,//当前步骤审批人
    adjust_auditor_order,
    path,
    p_path,
    index,
    step_type,
    step,
    actual_steps,
    updater,//父组件更新所有步骤信息
    onNodesChange//父组件多人选择具体人时的事件
 }) {

    let enableSortable = nodes.length > 1 && adjust_auditor_order && index != 0;//审批人大于1 && 允许调整责任人顺序 && 不是第一个步骤
    let groupCls = clsx("auditor_order_wrap", enableSortable && "sortable");

    const [state, setState] = useState(nodes);

    if(!step.is_Adjustment 
        && step.stepAttrs.adjust_multi_auditor 
        && path != 0
    ){//可调整责任人
        let checkedList = [];
        nodes.map(function(nodeItem){
            if(nodeItem.Checked){//tplData.ProcessInfo.MultiUserSelect
                checkedList.push(nodeItem.auditor_id);
            }
        });
        let uid = uuid();
        return <Checkbox.Group
                        value={checkedList}
                        onChange = {
                            (e)=>{
                                onNodesChange({
                                    e: e,
                                    nodes: nodes,
                                    step: step,
                                    actual_steps: actual_steps
                                }
                            )}
                        }
                        className={groupCls}>
                            <ReactSortable 
                                disabled={!enableSortable}
                                list={nodes} 
                                animation={200}
                                filter={".ant-checkbox-wrapper"}
                                setList={(e)=>{
                                    // setState(e)
                                    // nodes = e;
                                    step.nodes = JSON.parse(JSON.stringify(e));//更新步骤信息
                                    let p_step = actual_steps.find(function(s) {
                                        return s.id == step.id;
                                    });
                                    p_step.nodes = JSON.parse(JSON.stringify(step.nodes));//同步更新 actual_steps

                                    updater();
                                }}>
                                    {
                                        nodes.map(function(node, ind){
                                            return <div className="pt-10px cell" key={node.auditor_id}>
                                                    <Checkbox
                                                        key={node.auditor_id}
                                                        value={node.auditor_id}
                                                        data-nodeind={ind}
                                                    >
                                                        {
                                                            /*拖拽排序图标*/
                                                            (nodes.length > 1 && adjust_auditor_order)
                                                            && <i className="order_icon iconfont icon-xingzhuangjiehe1"></i>
                                                        }
                                                        {
                                                            /*审批人头像和名字信息*/
                                                        }   
                                                        <JstempApproveStepsAuditor
                                                            item={node}
                                                            step_type={step_type}
                                                            ind={ind}
                                                        ></JstempApproveStepsAuditor>
                                                    </Checkbox>

                                                    {/*这个是箭头*/}
                                                    {
                                                        ind+1 < nodes.length
                                                        && <i className={clsx("order_arrow_icon iconfont icon-chuanhang block mt-1 text-b2b2b2 text-xs", adjust_auditor_order ? "ml-58px" : "ml-35px")}></i>
                                                    }

                                                </div>
                                        })
                                    }
                            </ReactSortable>
                </Checkbox.Group>
    }else{//不可调整责任人
        
        return <ul className={groupCls} data-p_path={p_path}>
            <ReactSortable 
                disabled={!enableSortable}
                list={nodes} 
                animation={200}
                setList={(e)=>{
                    step.nodes = JSON.parse(JSON.stringify(e));//更新步骤信息
                    let p_step = actual_steps.find(function(s) {
                        return s.id == step.id;
                    });
                    p_step.nodes = JSON.parse(JSON.stringify(step.nodes));//同步更新 actual_steps

                    updater();
                }}>
                    {
                        nodes.map(function(node, ind){
                            return <li key={node.auditor_id} data-path={path + "." + ind} className="cell pt-10px">
                                {
                                    /*拖拽排序图标*/
                                    (nodes.length > 1 && adjust_auditor_order)
                                    && <i className="order_icon iconfont icon-xingzhuangjiehe1"></i>
                                }

                                <JstempApproveStepsAuditor
                                    item={node}
                                    step_type={step_type}
                                    ind={ind}
                                ></JstempApproveStepsAuditor>
                                {/*这个是箭头*/}
                                {
                                    ind+1 < nodes.length
                                    && <i className={clsx("order_arrow_icon iconfont icon-chuanhang block mt-1 text-b2b2b2 text-xs", adjust_auditor_order ? "ml-35px" :"ml-3")}></i>
                                }
                            </li>
                        })
                    }
            </ReactSortable>
        </ul>
    }
 }